<template>
  <div>
      <h1 ref="h1">ref模板中的用法</h1>
      <p ref="pm">vue的ref使用</p>
      <hr>
      <Son ref="fm"/>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Son from './son.vue'
export default {
  components: {
    Son
  },
  setup () {
    const h1 = ref(null)

    const fm = ref(null)
    onMounted(() => {
      console.log('组件过载', h1.value, fm.value)
      h1.value.style.color = 'red'
      fm.value.validate(() => {
        console.log(456)
      })
    })
    return { h1, fm }
  },
  mounted () {
    console.log('vue2获取html元素：', this.$refs.pm)
  }
}
</script>

<style lang="scss" scoped>

</style>
